@use 'sass:map';
@use '@angular/material' as mat;
@use 'libs/component-angular/styles/material/all-components' as components;
@use 'libs/formly/formly-theme' as formly;
@use 'libs/story-angular/responsive/responsive-theme' as responsive;
@use 'libs/story-angular/story/story-theme' as story;
@use 'libs/story-angular/src/lib/story-theme' as story-designer;
@use 'libs/story-angular/widgets/widgets-theme' as widgets;
// @use '@metad/ocap-angular/theming' as ocap;
@use 'packages/angular/theming' as ocap;

// Background palette for dark themes.
$radial-gradient-background: no-repeat radial-gradient(farthest-side ellipse at 10% 0, #333867, #17193b);
// mat.$dark-theme-background-palette: (
//   status-bar: black,
//   app-bar: map_get(mat.$grey-palette, 900),
//   background: #17193b,
//   gradient-background: $radial-gradient-background,
//   hover: rgba(white, 0.04),
//   // TODO(kara): check style with Material Design UX
//   // card: rgba(0,0,0,.24),
//   card: rgba(23, 25, 59, 0.875),
//   dialog: $radial-gradient-background, //#333867,
//   disabled-button: rgba(white, 0.12),
//   raised-button: rgba(white, 0.12),
//   focused-button: $light-focused,
//   selected-button: map_get(mat.$grey-palette, 900),
//   selected-disabled-button: map_get(mat.$grey-palette, 800),
//   disabled-button-toggle: black,
//   unselected-chip: rgba(white, 0.12), /* map_get(mat.$grey-palette, 700), */
//   disabled-list-option: rgb(12, 10, 10),
//   tooltip: map_get(mat.$grey-palette, 700),
//   surface: rgba(23, 25, 59, 0.875)
// );

$grey-palette: mat.$blue-grey-palette;
// Define an alternate dark theme.
$thin-primary: mat.define-palette(mat.$indigo-palette);
$thin-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
$thin-warn: mat.define-palette(mat.$deep-orange-palette);

$dark-theme: map.deep-merge(
  mat.define-dark-theme(
    (
      color: (
        primary: $thin-primary,
        accent: $thin-accent
      )
    )
  ),
  (
    color: (
      background: (
        status-bar: black,
        app-bar: mat.get-color-from-palette($grey-palette, 900),
        background: $radial-gradient-background,
        hover: rgba(white, 0.04),
        // TODO(kara): check style with Material Design UX
        card: rgba(23, 25, 59, 0.875),
        //#222b45,
        dialog: #17193b,
        disabled-button: rgba(white, 0.12),
        raised-button: map.get($grey-palette, 800),
        // focused-button: $light-focused,
        selected-button: map.get($grey-palette, 900),
        selected-disabled-button: map.get($grey-palette, 800),
        disabled-button-toggle: black,
        unselected-chip: #222b45,
        disabled-list-option: black,
        tooltip: map.get($grey-palette, 700)
      )
    )
  )
);

.ngm-theme-thin {
  // Include all theme styles for the mat components.
  @include mat.all-component-colors($dark-theme);
  @include components.all-component-colors($dark-theme);
  @include formly.color($dark-theme);
  @include responsive.color($dark-theme);
  @include story.color($dark-theme);
  @include story-designer.color($dark-theme);
  @include widgets.color($dark-theme);

  @include ocap.core-color($dark-theme);
  @include ocap.analytical-grid-color($dark-theme);
  @include ocap.breadcrumb-color($dark-theme);
  @include ocap.controls-color($dark-theme);
  @include ocap.entity-color($dark-theme);
  @include ocap.common-color($dark-theme);
}
